<!doctype html>
<html lang="en" class="dark font-sans antialiased">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/component.css" rel="stylesheet" />
    <script src="/component.js" defer></script>
  </head>
  <body class="mx-auto max-w-3xl p-6">
    <div>
      <h2 class="sr-only">Steps</h2>

      <div
        class="relative after:absolute after:inset-x-0 after:top-1/2 after:block after:h-0.5 after:-translate-y-1/2 after:rounded-lg after:bg-gray-200"
      >
        <ol class="relative z-10 flex justify-between text-sm font-medium text-gray-600">
          <li class="flex items-center gap-2 bg-white p-2">
            <span class="size-6 rounded-full bg-gray-100 text-center text-[10px]/6 font-bold">
              1
            </span>

            <span class="hidden sm:block"> Details </span>
          </li>

          <li class="flex items-center gap-2 bg-white p-2">
            <span
              class="size-6 rounded-full bg-blue-500 text-center text-[10px]/6 font-bold text-white"
            >
              2
            </span>

            <span class="hidden sm:block"> Address </span>
          </li>

          <li class="flex items-center gap-2 bg-white p-2">
            <span class="size-6 rounded-full bg-gray-100 text-center text-[10px]/6 font-bold">
              3
            </span>

            <span class="hidden sm:block"> Payment </span>
          </li>
        </ol>
      </div>
    </div>
  </body>
</html>
